import React from 'react';
import {Input, Button, Select, Checkbox, Radio, Form,Drawer} from 'antd'
import Utils from '../../utils/utils'

const FormItem = Form.Item;
const Option = Select.Option;

/**
 * 表单封装
 */
class FilterForm extends React.Component {

    state = { visible: false };
    showDrawer = () => {
        this.setState({
            visible: true,
        });
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    };
    handleFilterSubmit = () => {//提交（传递表单数据）
        let fieldsValue = this.props.form.getFieldsValue();//获取表单数据
        this.props.filterSubmit(fieldsValue);
    };

    rest=()=> {//重置
        this.props.form.resetFields();
    };
    initFormList = () => {
        const {getFieldDecorator} = this.props.form;
        const formList = this.props.formList;
        let formItemList = [];
        if (formList && formList.length > 0) {
            formList.forEach((item) => {
                let label = item.label;
                let field = item.field;
                let initialValue = item.initialValue || '';
                let placeholder = item.placeholder;
                let width = item.width;
                if (item.type === 'INPUT') {
                    const INPUT = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator(field, {
                                initialValue: initialValue
                            })(
                                <Input type="text" placeholder={placeholder}/>
                            )
                        }
                    </FormItem>;
                    formItemList.push(INPUT);
                } else if (item.type === 'SELECT') {
                    const SELECT = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator(field, {
                                initialValue: initialValue
                            })(
                                <Select
                                    style={{width: width}}
                                    placeholder={placeholder}
                                >
                                    {Utils.getOptionList(item.list)}
                                </Select>
                            )
                        }
                    </FormItem>
                    formItemList.push(SELECT);
                } else if (item.type === 'CHECKBOX') {
                    const CHECKBOX = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator(field, {
                                initialValue: initialValue,//true|false
                                valuePropName: 'checked',
                            })(
                                <Checkbox>
                                    {label}
                                </Checkbox>
                            )
                        }
                    </FormItem>
                    formItemList.push(CHECKBOX);
                }
                //如果不需要冒号：<FormItem label="~" colon={false}>

            })
        }
        return formItemList;
    };
    render() {
        return (
            <div>
                <Form layout="inline">
                    {this.initFormList()}
                    <FormItem>
                        <Button type="primary" style={{margin: '0 20px'}} onClick={this.handleFilterSubmit}>查询</Button>
                        <Button onClick={this.rest}>重置</Button>
                        <Button onClick={this.showDrawer}>侧边栏</Button>
                    </FormItem>
                </Form>
                <Drawer
                    title="Basic Drawer"
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                >
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Drawer>
            </div>


        )
    }
};
export default Form.create({})(FilterForm);
